---
import { Observed, Section, SectionHeadline } from "#components/fragments";
import { PricingPlans } from "./pricing-plans";
---

<Section>
  <div
    class="bg-gradient-to-tr opacity-30 absolute top-[25vmin] xl:-top-[50vmin] -right-[50vmin] h-[100vmin] w-[100vmin] flex justify-center items-center rounded-full -z-1 blur-2xl"
  >
    <div class="h-[60vmin] w-[60vmin] bg-gray-50 dark:bg-gray-800 absolute rounded-full"></div>
  </div>
  <div class="flex gap-8 flex-col">
    <div
      class="flex justify-center items-start xl:items-center mt-24 xl:mt-24 flex-col xl:flex-row"
    >
      <SectionHeadline
        title="Pricing"
        subtitle="Simple plans that scale with your needs"
        size="lg"
      />
      <Observed
        client:load
        as="span"
        class="flex-1 flex justify-end transition-all delay-250 duration-500 ease-out"
        outOfViewClass="invisible translate-x-4 opacity-0"
        immediate
      >
        <p class="text-xl md:text-2xl z-1 relative mt-4 md:mt-0">
          Sign up for 14-day free trial.<br /> No credit card required.
        </p>
      </Observed>
    </div>
    <PricingPlans client:load />
  </div>
</Section>
